<template>
  <div class="ly-login" v-loading="loading" element-loading-text="正在登录..."
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="ly-info">
      <h2>孵化器后台管理系统</h2>
      <ul class="ly-list">
        <li>
          <i class="iconfont icon_user"></i>
          <input type="text" placeholder="请输入用户名" v-model="userName" v-on:keyup.enter="submit"/>
        </li>
        <li>
          <i class="iconfont icon_password"></i>
          <input type="password" placeholder="请输入密码" v-model="userPassword" v-on:keyup.enter="submit"/>
        </li>
        <!--        <li>-->
        <!--          <i class="iconfont icon_code"></i>-->
        <!--          <input type="text" placeholder="请输入验证码" v-model="userCode" v-on:keyup.enter="submit"/>-->
        <!--          <img :src="imgUrl" @click="changeImg"/>-->
        <!--        </li>-->
      </ul>
      <div class="ly-btn" @click="submit">登录</div>
    </div>
  </div>
</template>

<script>
  import check from "../../consts/checking"
  import {login} from "@/api/auth"

  export default {
    name: "login",
    data() {
      return {
        userName: '',
        userPassword: '',
        userCode: '',
        imgUrl: require('../../assets/images/logo.png'),
        loading: false
      }
    },
    methods: {
      // 重新获取验证码图片
      changeImg() {
        this.imgUrl = require('../../assets/images/u18.png')
      },
      // 登录
      submit() {
        let vm = this, data = {}
        //非空验证
        if (check.userName(vm.userName) && check.userPassword(vm.userPassword)) {
          vm.loading = true
          data = {
            username: vm.userName,
            password: vm.userPassword
          }
          login(data).then(response => {
            let result = response.data
            vm.loading = false
            if (result.code === '0000') {
              vm.$message({
                message: '登录成功',
                type: 'success',
                duration: 1500
              })
              let user = {}
              if(result.data==='登录成功'){
                user.name = vm.userName
              }
              vm.$store.commit('updateUserInfoData', user)
              vm.$store.commit('updateIsLoginData', true)
              vm.$router.push("/")
            }else {
              vm.$message.error(result.msg)
            }
          })
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .ly-login {
    width: 100%;
    height: 100%;
    position: absolute;
    background: #f4f4f4;
    top: 0;
    left: 0;
    z-index: 3;

    .ly-info {
      width: 430px;
      height: 400px;
      background: #fff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 4;
      margin-left: -215px;
      margin-top: -200px;
      padding: 30px 75px;
      box-shadow: 10px 10px 30px #ccc;

      h2 {
        text-align: center;
        font-size: 26px;
        line-height: 40px;
        color: #797979;
        font-weight: 700;
      }

      .ly-list {
        width: 100%;
        padding: 30px 0 20px;

        li {
          width: 100%;
          line-height: 50px;
          position: relative;
          padding-left: 50px;
          border-radius: 4px;
          border: 1px solid #e5e5e5;
          margin-bottom: 15px;

          i {
            position: absolute;
            top: 0;
            left: 0;
            width: 48px;
            height: 48px;
            text-align: center;
            line-height: 48px;
            font-size: 24px;
            color: #ccc;
          }

          input {
            font-size: 16px;
            line-height: 40px;
            padding: 4px 6px;
            border: none;
          }

          img {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
            border-left: 1px solid #e5e5e5;
            z-index: 6;
          }
        }
      }
    }

    .ly-btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-radius: 6px;
      background: #608BF5;
      font-size: 18px;
      text-align: center;
      letter-spacing: 2px;
      color: #fff;
      cursor: pointer;
    }
  }
</style>